<template>
  <div id="background">
    <el-card>
      <div>
        <div class="div_top_title">
          <h2>欢迎注册</h2>
          <div class="div_top_title_desc">
            <span>已有账号?</span>
            <el-link class="div_top_title_link" @click="setVisible">登录</el-link>
          </div>
        </div>
      </div>
      <div>
        <el-form ref="form" :model="registerInfo" label-width="60px" router="router">
          <el-form-item label="用户名">
            <el-input v-model="registerInfo.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input show-password v-model="registerInfo.password"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="registerInfo.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="registerInfo.email"></el-input>
          </el-form-item>
           <el-form-item label="舞种">
            <el-select v-model="registerInfo.danceType" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="addUser">注册</el-button>
        </div>
      </div>
    </el-card>
    <div>
      <registerLoginDialog
        :visibleType.sync="dialogVisible"
        @getVisible="getVisible"
        ref="registerLoginDialog"
      >
      </registerLoginDialog>
    </div>
  </div>
</template>
<script>
import registerLoginDialog from "../components/registerLoginDialog.vue";

export default {
  components: {registerLoginDialog},
  data () {
    return {
      loading: false,
      dialogVisible:false,
      registerInfo: {
        username:'',
        password:'',
        phoneNumber:'',
        email:'',
        danceType:'',
      },
      options: [{
          value: 'popping',
          label: 'popping'
        }, {
          value: 'breaking',
          label: 'breaking'
        }, {
          value: 'hiphop',
          label: 'hiphop'
        }, {
          value: 'locking',
          label: 'locking'
        }, {
          value: 'wacking',
          label: 'wacking'
        },{
          value: 'house',
          label: 'house'
        }],
    }
  },
  methods: {
    addUser() {
      this.loading = true
      this.$axios.get('api/register/', {
        params: {
          username: this.registerInfo.username, password: this.registerInfo.password,
          phoneNumber: this.registerInfo.phoneNumber, email: this.registerInfo.email, danceType: this.registerInfo.danceType
        }
      }).then((response) => {
        var res =response.data
        if (res['respCode']  === '000000'){
          this.$message.success('注册成功')
          this.$router.push('/')
        }if(res['respCode']  === '1'){
          this.$message.error('用户名已存在')
          console.log(res['msg'])
          this.loading = false
        }if(res['respCode'] === '2'){
          this.$message.error('手机号已存在')
          console.log(res['msg'])
          this.loading = false
        }if(res['respCode']  === '3'){
          this.$message.error('邮箱已存在')
          console.log(res['msg'])
          this.loading = false
        }
      })
    },
    setVisible() {
      this.dialogVisible=true
    },
    getVisible(val) {
      this.dialogVisible = val
    },
  }
}
</script>
<style scoped>
.el-card {
  width: 30%;
  float: right;
  border-radius: 20px;
  opacity: 0.9;
  position: relative;
  top: 50px;
  right: 80px;
}
#background {
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;
  background-repeat: no-repeat;
  background-image: url("../assets/wallhaven-zyxvqy.jpg");
}
.div_top_title {
  padding-left: 20px;
  margin-bottom: 40px;
}
.div_top_title_desc {
  line-height: 17px;
  font-size: 17px;
}
.div_top_title_link {
  color: #5691c8;
}
.el-form {
  width: 90%;
  position: relative;
  left: 20px;
}
.el-form >>> .el-form-item__label {
  text-align: justify;
  text-align-last: justify;
}
.el-button {
  width: 90%;
  position: relative;
  left: 20px;
  border-radius: 20px;
  margin-top: 30px;
}
</style>
